<!-- ------------------资产明细------------- -->
<template>
	<view class="assetsDetail">
		<scroll-view scroll-x>
			<view class="tabs">
				<label
					v-for="(item, index) in tabs"
					:key="index"
					:class="tabsIndex == index ? 'active' : ''"
					@click="switchTab(index)"
				>
					{{ item }}
				</label>
			</view>
		</scroll-view>

		<view class="list">
			<view v-if="assetsDetails.length && tabsIndex === 2" class="item th">
				<label :style="{ flex: 1 }">类型</label>
				<label :style="{ flex: 1 }">数量</label>
				<label :style="{ flex: 1.2 }">时间</label>
				<label :style="{ flex: 1 }">状态</label>
			</view>
			<view
				v-for="(item, index) in assetsDetails"
				:key="index"
				class="item"
				:url="`/pages/assets/assetsIntroduce?id=${item.id}`"
			>
				<view v-if="tabsIndex === 2" class="tr">
					<label :style="{ flex: 1 }">{{ item.huobi }}</label>
					<label :style="{ flex: 1 }">{{ item.kymoney }}</label>
					<label :style="{ flex: 1.2 }">
						{{ formatDate(item.ctime * 1000, "Y-M-D") }}
					</label>
					<label :style="{ flex: 1 }">{{ item.status | statusText }}</label>
				</view>

				<block v-else>
					<view class="jyje">
						<text :style="{ fontSize: `28rpx` }">{{ item.ug_note }}</text>
						<text class="money" :style="{ fontSize: `30rpx` }">
							{{ item.ky_money || item.ug_money }}
						</text>
						<text :style="{ fontSize: `28rpx` }">{{ item.huobi || "USDT" }}</text>
					</view>
					<view class="time">{{ item.ug_gettime }}</view>
				</block>
			</view>

			<view
				:style="{
					textAlign: `center`,
					fontSize: `28rpx`,
				}"
				v-if="!assetsDetails.length"
			>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import { formatDate } from "@/static/utils";
	export default {
		data() {
			return {
				tabs: ["收益", "转账", "提币", "V级分红", "分公司分红"],
				tabsIndex: 0,
				assetsDetails: [],
			};
		},
		filters: {
			statusText(status) {
				return ["审核中", "提币成功", "已拒绝"][+status];
			},
		},

		onLoad() {
			this.switchTab(0);
		},
		methods: {
			formatDate,
			switchTab(index) {
				uni.showToast({ title: "Loading...", icon: "loading", mask: true });
				this.tabsIndex = index;
				this.assetsDetails = [];
				const requestParams = [
					{ path: "kuangcheshouyi", params: { type: "cz" } },
					{ path: "kuangcheshouyi", params: { type: "zz" } },
					{ path: "tixianList", params: {} },
					{ path: "kuangcheshouyi", params: { type: "vj" } },
					{ path: "kuangcheshouyi", params: { type: "fgs" } },
				][index];

				this.$request
					.get(`/Home/info/${requestParams.path}`, requestParams.params)
					.then(({ data }) => {
						this.assetsDetails.push(...data);
						uni.hideToast();
					});
			},
		},
	};
</script>

<style lang="scss">
	.assetsDetail {
		.tabs {
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 24rpx 30rpx 12rpx;
			box-sizing: border-box;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
			label {
				white-space: nowrap;
				&.active {
					color: #2a62ff;
					border-bottom: 4rpx solid #2a62ff;
				}
			}
		}
		.list {
			padding: 0 30rpx;
			.item {
				width: 100%;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background-color: #ffffff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.jyje {
					flex: 1;
					margin-right: 12rpx;
					color: #1a1a1a;
					line-height: 1;
					font-weight: 500;
					.money {
						color: #2a62ff;
						margin: 0 8rpx;
					}
				}
				.time {
					font-size: 20rpx;
					color: #666666;
				}
			}
		}
	}

	.th {
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		font-weight: 600;
		label {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex: 1;
		}
	}

	.tr {
		display: flex;
		flex: 1;
		justify-content: space-between;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		color: #1a1a1a;
		label {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex: 1;
		}
	}
</style>
